<template>
	<view class="modifyphone">
		<!-- 顶部导航 -->
		<diyNavBar value='修改手机号'></diyNavBar>
		<view class="modify-item">
			<view class="left">手机号</view>
			<input type="number" v-model="setData.mobile" placeholder="请输入手机号"/>
		</view>
		<view class="modify-item">
			<view class="left">验证码</view>
			<input type="text" v-model="setData.code" placeholder="请输入验证码"/>
			<button type="default" class="code" @click="verification" v-if="!time">发送验证码</button>
			<view class="text" v-else>
				{{ time + 's已发送'}}
			</view>
		</view>
		<button type="default" class="determine" @click="btn">绑定</button>
	</view>
</template>

<script>
	import diyNavBar from '../../component/diy-nav/diy-navbar.vue'
	export default{
		components:{diyNavBar},
		data(){
			return {
				time:0,//获取验证码
				setData:{
					mobile:'',
					code:'',
				},
				judgenum:false,//防止重复提交
				// 手机号做正则判断
				pattern:/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
			}
		},
		onShow(){
			this.$http.sendrequest('//member/Personalsz',{},{
				tokenJudge:true
			}).then(res=>{
				if(res.code == 1){
					this.setData = {
						mobile:res.data.mobile,
					}
				}
			})
		},
		methods:{
			//获取验证码
			verification(){
				let title = '';
				if(!this.pattern.test(this.setData.mobile)) title = '请输入正确的手机号'
				if(!this.setData.mobile) title = '请输入手机号'
				if(title){
					uni.showToast({title:title,icon:'none'})
					return false ;
				}
				this.$http.sendrequest('/login/sms_verification_code',{
					mobile:this.setData.mobile,
					type:'其他',
				}).then(res=>{
					uni.showToast({title:res.msg,icon:'none'})
					if(res.code == 1){
						this.time = 60;
						let die = setInterval(()=>{
							this.time -= 1;
							if(this.time == 0) clearInterval(die) 
						},1000)
					}
				})
			},
			btn(){
				if(this.judgenum) return false;
				this.judgenum = true
				this.$http.sendrequest('/member/UpdateMobile',this.setData,{
					tokenJudge:true
				}).then(res=>{
					uni.showToast({title:res.msg,icon:'none'});
					this.judgenum = false
					if(res.code == 1){
						setTimeout(()=>{
							uni.navigateBack({
								delta:1
							})
						},1000)
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.modifyphone{
		min-height: 100vh;
		background: $uni-content-background-color;
		.modify-item{
			display: flex;
			align-items: center;
			padding: 0 30rpx;
			box-sizing: border-box;
			height: 120rpx;
			background: #FFFFFF;
			font-size: 28rpx;
			border-bottom: 2rpx solid rgba(0,0,0,.02);
			.left{
				width:140rpx;
				margin-right: 40rpx;
			}
			.text{
				font-size: 28rpx;
				color: #666666 ;
			}
			input{
				width: calc(60% - 120rpx);
				height: 80%;
				text-align: left;
				font-size: 28rpx;
			}
			.code{
				width: 198rpx;
				height: 52rpx;
				text-align: center;
				line-height: 52rpx;
				color: #FFFFFF;
				background: #FF6F30;
				font-size: 24rpx;
				border-radius: 52rpx;
				margin: 0 0 0 24rpx;
			}
		}
		.determine{
			margin: 0 30rpx;
			width: auto;
			background: $uni-tabbar-hovercolor;
			text-align: center;
			line-height: 80rpx;
			font-size: 28rpx;
			color: #FFFFFF;
			margin-top:70rpx;
			border-radius: 80rpx;
		}
	}

</style>
